<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="css/top-cav.css">
    <!-- layui -->
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .log-background{
            margin-top: 90px;
            margin-left: 400px;
            border: 1px solid white;
            width: 700px;
            padding-left: 80px;
            height: 450px;
            background-color: white;
            border-radius: 10px;
            padding-left: 0px;
        }
        a{
            color: black;
            text-decoration: none;
        }
        .log-log-register{
            width: 270px;
            height: 445px;
            float:right;
           
        }
        .log_buttom{
            width: 1536px;
            height: 170px;
            background-color: #D72A3A;
         
       }
       .log-logo{

            width: 200px;
            height: 200px;
            float: left;
            background-image: url(image/picwish.png);
            background-size: 100%;
            margin-top: 10px;
            margin-left: 140px;
       }
       .log-buttom-icon{
            float: left;
       }
       .buttom_nav{
            width: 1536px;
            height: 700px;
            background-color: #3b3d42;
       }
       .buttom_nav_center{
        width: 1140px;
        height: 700px;
        
        margin-left: 180px;
       }

       .buttom_nav_center div{
          
            width: 1140px;
            height: 40px;
       }
       .buttom_nav_center div .title{
            color: white;
            font-size: 18px;
            height: 30px;
            float: left;
            color: #aaacb3;
            font-weight: bold;
       }
       .recommend-content{
            float: left;
            margin-top: 10px;
            
       }
       .recommend-content span a{
            font-size: 17px;
            text-decoration: none;
            color: #8b8d92;
            margin-right: 20px;
       }
       .recommend-content span a:hover{
            color: white;
       }
     
       #about-suleju{
           
            height: 300px;
            margin-top: 26px;
       }
       #max-buttom-info{
            height: 70px;
        
            margin-top: 210px;
            
            
       }
       #suleju-web-info{
            font-size: 17px;
            text-decoration: none;
            color: #8b8d92;
           
        
       }
       #suleju-web-info div{
            float: left;   
       }
       #suleju-web-info a{
            float: left;
            text-decoration: none;
            color: #8b8d92;
       }
       #suleju-web-info a:hover{
            color: white;
       }
    </style>
</head>
<body>
    
    <div class="max-frame" >
        <!-- 顶部导航栏 -->
        <div class="top-navi">
            <div class="logo-div">
                <a class="logo1" href="frontpage.html">
                    <!-- logo的图片 -->
                    <img src="image/logo1.png" width="100px" height="76px" alt="无图片">
                </a>
            </div>
            <div class="region">
                
                <!-- 选择城市的页面 -->
                <a href="search.html">
                    <span class="region-pic"></span>
                    <span style="display: block;float: left;padding-top: 8px;font-weight: bold;">吴中区</span>

                </a> 
            </div>
            <div class="cen-navi">
           
                <ul class="layui-nav"  lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="" style="color: black;">首页</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=0" style="color: black;">合租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html?hire=1" style="color: black;">整租</a></li>
                    <li class="layui-nav-item"><a href="Classification.html" style="color: black;">分类</a></li>
                    <li class="layui-nav-item"><a href="manager.html"style="color: black;">经纪人登录</a></li>
                    <li class="layui-nav-item"><a href="javascript:void(0)" onclick="release()" style="color: black;">发布房源</a></li>
                  </ul>
                   
                  <script>
                  //注意：导航 依赖 element 模块，否则无法进行功能性操作
                  layui.use('element', function(){
                    var element = layui.element;
                    //…
                  });
                  </script>
            </div>
            <div class="log-register-button">
                <div class="log-register">
                    <a href="logpage.html" style="font-weight: bold;">
                        <img src="image/icon_people_black.png" style="float: left; margin-right: 5px;" alt="">
                        登录
                    </a>
                </div>
                <div style="float: left;margin-left: 10px;">|</div>
                <div class="log-register">
                    <a href="#">
                        <div style="margin-top: 1px;font-weight: bold;">注册</div>
                    </a> 
                </div>
            </div>
            
        </div>
        <div class="log-background">
            
            <div style="width: 400px;padding-left: 80px;float: left; border-right: 1px dashed rgb(237, 237, 237);">
                <div style="font-size: 30px;font-weight:bold;margin-left:50px;margin-top:50px;">
                    <span>欢迎注册</span>
                </div>
                <form class="form-horizontal" id="register_form" style="margin-top: 30px;" role="form">
                    <div class="form-group">
                      <div class="col-sm-10">
                        <input type="text" onblur="phoneHide()" name="inputPhone" class="form-control" id="inputPassword" placeholder="手机号码">
                      </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-10">
                          <input type="text" onblur="passwordHide()" name="inputPassword" class="form-control" id="inputPassword1" placeholder="输入密码">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 30px;">
                        <div class="col-sm-5" >
                          <input type="password" name="checkCode"  class="form-control" id="inputPassword" placeholder="验证码">
                        </div>
                        <input id="btnSendCode" type="button" onclick="register_send_checkcode();sendMessage()" class="layui-btn layui-btn-radius" style="background-color: white;border:1px solid red;color: red;" value="获取验证码"/>
                    </div>
                    <input type="checkbox" style="float:left;margin-top:10px;" name="" title="请记住我" lay-skin="primary" checked>
                    <div style="display:block;float: left; margin-bottom:2px;height: 20px;margin-left: 5px;margin-top: 10px;">我已经阅读并同意<a style="color:red">《使用条款及隐私说明》</a></div>
                    <button type="button" onclick="register()" class="layui-btn  layui-btn-lg layui-btn-radius" style="background-color: white;border: 1px solid red;color: red; margin-top: 40px;margin-left: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </form>
            </div>
            <div class="log-log-register">
                <div style="margin-top: 200px;margin-left:50px">
                    已经有账号：
                </div>
                <div style="margin-left:50px;margin-top: 10px;">
                    <a href="logpage.html" style="color:red; text-decoration: none;">
                        立即登录
                        <span class="glyphicon glyphicon-circle-arrow-right glyphicon-font"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="log_buttom">
        <div class="log-logo">
        </div>
        <div  class="log-buttom-icon">
            <div class="glyphicon glyphicon-film" style=" color: white;width:50px;height: 50px;font-size: 50px;margin-top: 40px;margin-left: 70px;"></div>
            <div style="margin-left: 65px;color: white;font-size: 15px;font-weight: bold;margin-top: 10px;">极速找房</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-service" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线客户</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-date" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">在线预约</div>
        </div>
        <div class="log-buttom-icon" >
            <i class="layui-icon layui-icon-find-fill" style="font-size: 56px;color:white;margin-left:150px;display: block;margin-top: 30px;"></i>
            <div style="margin-left: 150px;color: white;font-size: 15px;font-weight: bold;margin-top: -5px;">地图找房</div>
        </div>
        
    </div>
    <div class="buttom_nav">
            <div class="buttom_nav_center">
                <div class="recommend-area-rent">
                    <div class="title">
                        推荐区域租房
                    </div>
                    <div class="recommend-content">
                        <span class="">
                            <a href="">吴中</a>
                            <a href="">吴江</a>
                            <a href="">园区</a>
                            <a href="">太仓</a>
                            <a href="">姑苏区</a>
                            <a href="">常说</a>
                            <a href="">平江</a>
                            <a href="">张家港</a>
                            <a href="">高新区</a>
                            <a href="">沧浪</a>
                            <a href="">相城</a>
                            <a href="">昆山</a>
                            <a href="">金阊</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 80px;height: 15px;"></div>
                <div class="recommend-subway-rent">
                    <div class="title">
                        推荐地铁租房
                    </div>
                    <div class="recommend-content">
                        <span class="">
                            <a href="">1号线</a>
                            <a href="">2号线</a>
                            <a href="">3号线</a>
                            <a href="">4号线支线</a>
                            <a href="">4号线</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                <div class="Recommend-type-rent">
                    <div class="title">
                        推荐类型租房
                    </div>
                    <div class="recommend-content">
                        <span>
                            <a href="">苏州合租</a>
                            <a href="">苏州整租</a>
                            <a href="">苏州公寓</a>
                          </span>
                    </div>
                </div>
                <div  style="border-top: 1px solid #8b8d92;margin-top: 40px;height: 15px;"></div>
                <div id="about-suleju">
                    <div class="title" style="float: left;width: 200px;height: 300px;">
                        <div style="width: 200px;">
                            关于苏乐居
                        </div>
                        <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >伙伴登录</a>
                                <a href="" style="margin-top: 10px;display: block;">网站地图</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            苏乐居合作公寓
                        </div>
                        <div class="recommend-content" style="width:140px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >青年汇</a>
                                <a href="" style="margin-top: 10px;display: block;">银桥公寓</a>
                                <a href="" style="margin-top: 10px;display: block;">爱家精品公寓</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            意见回馈
                        </div>
                        <div class="recommend-content" style="width:100px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >mail:2308844@qq.com</a>
                              </span>
                        </div>
                    </div>
                    <div class="title" style="float: left;width: 200px;">
                        <div style="width: 200px;">
                            联系苏乐居
                        </div>
                        <div class="recommend-content" style="width:300px;margin-top: 0px;font-weight: normal;">
                            <span>
                                <a href="" >10106006</a>
                                <br>
                                <br>
                                <a href="">周一～周日 8:00～23:00</a>
                              </span>
                        </div>
                    </div><br>
                    <div id="max-buttom-info">
                        <div id="suleju-web-info">
                            <div style="width:300px;margin-left:-110px">
                                ©2015 上海万间信息技术有限公司
                            </div>  
                            <a href="" style="margin-right: 25px;">
                                隐私协议 
                            </a>
                            <a href="">服务协议</a>
                            <div style="width:300px;margin-left:30px;margin-right: 30px;">上海市浦东新区晨晖路88号 金蝶软件园</div>
                            <a href=""> 沪ICP备15004537号-2    </a>
                        </div>
                        <div id="suleju-web-info">
                            <div style="width: 25px;height: 23px;
                             margin-left: -130px;background-image: url(image/gongan.png);background-size: 100%;">

                            </div>
                            <a style="width:260px;margin-left:-100px">
                                沪公网安备31011502006937号  
                            </a>  
                            <div style="width:300px;margin-left:0px;">增值电信业务许可证：沪B2-20170251</div>
                            
                        </div>
                       
                    </div>
                    
                </div>
            </div>
            
    </div>

    <script>
        //发布房源判断是否登录，否则进入登录页面
        function release(){
            let token = localStorage.getItem("token");
            if(token != null){
                window.location = "upload-house.html";
            }
            else{
                layer.msg('请先登录！', {icon: 6,anim:0});   
                setTimeout(function(){window.location.href='logpage.html';},1000);
 
            }
        }
        function register_send_checkcode(){
            let phone = $("#inputPassword").val();
           
            $.ajax({
                type:"post",
                url:"/gewu/userRegister/checkCode",
                data:{"phone":phone},
                success:function(res){
                    if(res.code == 500){
                        alert("请输入电话号码！")
                    }
                    
                    if(res.code == 200){
                        console.log(res)
                    }
                }
            })
        }
        function register(){
            let data = $("#register_form").serialize();
            console.log(data);
            $.ajax({
                type:"post",
                url:"/gewu/userRegister/save",
                data:data,
                success:function(res){
                    if(res.code == 500){
                        alert(res.msg)
                    }
                    if(res.code == 501){
                        alert(res.msg)
                    }
                    if(res.code == 200){
                        window.location = "logpage.html";
                    }
                }
            })
        }
        //前端校验
        function phoneHide(){
            var phoneValue = document.getElementById("inputPassword").value;
            var flag = checkphone(phoneValue);
            if(flag) {
                return true;
            } else {
                
                layer.msg("手机号码格式不正确")
                return false;
            }
        }
        function checkphone(strEmail) {      
            var emailReg = /^[1][345678][0-9]{9}$/;
            
            if ( emailReg.test(strEmail) ) {
                return true;
            }
            else {
                return false;
            }
        };
        function passwordHide(){
            var passwordValue = document.getElementById("inputPassword1").value;
            var flag = checkPassword(passwordValue);
            
            if(flag) {
                return true;
            } else {
                
                layer.msg("密码格式不正确")
                return false;
            }
        }
        function checkPassword(strEmail) {      
            var emailReg = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{6,18}$/;//1.密码必须由字母、数字组成，区分大小写,2.密码长度为6-18位
            if (emailReg.test(strEmail) ) {
                return true;
            }
            else {
                return false;
            }
        };

        var InterValObj; //timer变量，控制时间
        var count = 60; //间隔函数，1秒执行
        var curCount;//当前剩余秒数
        //发送短信验证码
        function sendMessage() {
        curCount = count;
        // 设置button效果，开始计时
        document.getElementById("btnSendCode").setAttribute("disabled","true" );//设置按钮为禁用状态
        document.getElementById("btnSendCode").value=curCount + "秒后重获";//更改按钮文字
        InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
        }
        
        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {//超时重新获取验证码                
                window.clearInterval(InterValObj);// 停止计时器
                document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
                document.getElementById("btnSendCode").value="重获验证码";
            }else {
                curCount--;
                document.getElementById("btnSendCode").value=curCount + "秒后重获";
            }
        }
    </script>
  
    
</body>
</html>